Реализация React useActionState: Управление состоянием на основе действий

Хук useActionState в React, представленный в последних версиях, предлагает усовершенствованный подход к управлению обновлениями состояния, возникающими в результате асинхронных действий. Этот мощный инструмент упрощает процесс обработки мутаций, обновления пользовательского интерфейса и управления состояниями ошибок, особенно при работе с серверными компонентами React (RSC) и серверными действиями. В этом руководстве мы рассмотрим тонкости useActionState, предоставив практические примеры и лучшие практики для его реализации.

Понимание необходимости управления состоянием на основе действий

Традиционное управление состоянием в React часто включает отдельное управление состояниями загрузки и ошибок внутри компонентов. Когда действие (например, отправка формы, получение данных) инициирует обновление состояния, разработчики обычно управляют этими состояниями с помощью нескольких вызовов useState и потенциально сложной условной логики. useActionState предоставляет более чистое и интегрированное решение.

Рассмотрим простой сценарий отправки формы. Без useActionState у вас могли бы быть:

• Переменная состояния для данных формы.
• Переменная состояния для отслеживания отправки формы (состояние загрузки).
• Переменная состояния для хранения сообщений об ошибках.

Такой подход может привести к громоздкому коду и потенциальным несоответствиям. useActionState объединяет эти аспекты в одном хуке, упрощая логику и улучшая читаемость кода.

Знакомство с useActionState

Хук useActionState принимает два аргумента:

1. Асинхронная функция («действие»), которая выполняет обновление состояния. Это может быть серверное действие или любая другая асинхронная функция.
2. Начальное значение состояния.

Он возвращает массив, содержащий два элемента:

1. Текущее значение состояния.
2. Функция для вызова действия. Эта функция автоматически управляет состояниями загрузки и ошибок, связанными с этим действием.

Вот базовый пример:

import { useActionState } from 'react'; async function updateServer(prevState, formData) { // Имитация асинхронного обновления на сервере. await new Promise(resolve => setTimeout(resolve, 1000)); const data = Object.fromEntries(formData); if (data.name === "error") { return 'Не удалось обновить сервер.'; } return `Имя обновлено на: ${data.name}`; } function MyComponent() { const [state, dispatch] = useActionState(updateServer, 'Начальное состояние'); async function handleSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const result = await dispatch(formData); console.log(result); } return (

Имя: Обновить

Состояние: {state}

); }

В этом примере:

• updateServer — это асинхронное действие, которое имитирует обновление на сервере. Оно получает предыдущее состояние и данные формы.
• useActionState инициализирует состояние значением 'Начальное состояние' и возвращает текущее состояние и функцию dispatch.
• Функция handleSubmit вызывает dispatch с данными формы. useActionState автоматически обрабатывает состояния загрузки и ошибок во время выполнения действия.

Обработка состояний загрузки и ошибок

Одним из ключевых преимуществ useActionState является встроенное управление состояниями загрузки и ошибок. Функция dispatch возвращает промис, который разрешается результатом действия. Если действие выбрасывает ошибку, промис отклоняется с этой ошибкой. Вы можете использовать это для соответствующего обновления UI.

Изменим предыдущий пример, чтобы отображать сообщение о загрузке и сообщение об ошибке:

import { useActionState } from 'react'; import { useState } from 'react'; async function updateServer(prevState, formData) { // Имитация асинхронного обновления на сервере. await new Promise(resolve => setTimeout(resolve, 1000)); const data = Object.fromEntries(formData); if (data.name === "error") { throw new Error('Не удалось обновить сервер.'); } return `Имя обновлено на: ${data.name}`; } function MyComponent() { const [state, dispatch] = useActionState(updateServer, 'Начальное состояние'); const [isSubmitting, setIsSubmitting] = useState(false); const [errorMessage, setErrorMessage] = useState(null); async function handleSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); setIsSubmitting(true); setErrorMessage(null); try { const result = await dispatch(formData); console.log(result); } catch (error) { console.error("Ошибка при отправке:", error); setErrorMessage(error.message); } finally { setIsSubmitting(false); } } return (

Имя: Обновить {isSubmitting &&

Загрузка...

} {errorMessage &&

Ошибка: {errorMessage}

}

Состояние: {state}

); }

Ключевые изменения:

• Мы добавили переменные состояния isSubmitting и errorMessage для отслеживания состояний загрузки и ошибок.
• В handleSubmit мы устанавливаем isSubmitting в true перед вызовом dispatch и перехватываем любые ошибки для обновления errorMessage.
• Мы отключаем кнопку отправки во время процесса и условно отображаем сообщения о загрузке и ошибке.

useActionState с серверными действиями в серверных компонентах React (RSC)

useActionState особенно эффективен при использовании с серверными компонентами React (RSC) и серверными действиями. Серверные действия — это функции, которые выполняются на сервере и могут напрямую изменять источники данных. Они позволяют выполнять операции на стороне сервера без написания API-эндпоинтов.

Примечание: Этот пример требует среды React, настроенной для серверных компонентов и серверных действий.

// app/actions.js (Серверное действие) 'use server'; import { cookies } from 'next/headers'; //Пример для Next.js export async function updateName(prevState, formData) { const name = formData.get('name'); if (!name) { return 'Пожалуйста, введите имя.'; } try { // Имитация обновления базы данных. await new Promise(resolve => setTimeout(resolve, 1000)); cookies().set('userName', name); return `Имя обновлено на: ${name}`; //Успех! } catch (error) { console.error("Ошибка обновления базы данных:", error); return 'Не удалось обновить имя.'; // Важно: вернуть сообщение, а не выбрасывать ошибку } } // app/page.jsx (Серверный компонент React) 'use client'; import { useActionState } from 'react'; import { updateName } from './actions'; function MyComponent() { const [state, dispatch] = useActionState(updateName, 'Начальное состояние'); async function handleSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const result = await dispatch(formData); console.log(result); } return (

Имя: Обновить

Состояние: {state}

); } export default MyComponent;

В этом примере:

• updateName — это серверное действие, определённое в app/actions.js. Оно получает предыдущее состояние и данные формы, обновляет базу данных (имитация) и возвращает сообщение об успехе или ошибке. Важно, что действие возвращает сообщение, а не выбрасывает ошибку. Для серверных действий предпочтительнее возвращать информативные сообщения.
• Компонент помечен как клиентский ('use client'), чтобы использовать хук useActionState.
• Функция handleSubmit вызывает dispatch с данными формы. useActionState автоматически управляет обновлением состояния на основе результата серверного действия.

Важные моменты при работе с серверными действиями

• Обработка ошибок в серверных действиях: Вместо выбрасывания ошибок возвращайте из серверного действия осмысленное сообщение об ошибке. useActionState будет рассматривать это сообщение как новое состояние. Это позволяет корректно обрабатывать ошибки на клиенте.
• Оптимистичные обновления: Серверные действия можно использовать с оптимистичными обновлениями для улучшения воспринимаемой производительности. Вы можете немедленно обновить UI и откатить изменения, если действие не удалось.
• Ревалидация: После успешной мутации рассмотрите возможность ревалидации кэшированных данных, чтобы UI отражал последнее состояние.

Продвинутые техники использования useActionState

1. Использование редьюсера для сложных обновлений состояния

Для более сложной логики состояния вы можете комбинировать useActionState с функцией-редьюсером. Это позволяет управлять обновлениями состояния предсказуемым и поддерживаемым способом.

import { useActionState } from 'react'; import { useReducer } from 'react'; const initialState = { count: 0, message: 'Начальное состояние', }; function reducer(state, action) { switch (action.type) { case 'INCREMENT': return { ...state, count: state.count + 1 }; case 'DECREMENT': return { ...state, count: state.count - 1 }; case 'SET_MESSAGE': return { ...state, message: action.payload }; default: return state; } } async function updateState(state, action) { // Имитация асинхронной операции. await new Promise(resolve => setTimeout(resolve, 500)); switch (action.type) { case 'INCREMENT': return reducer(state, action); case 'DECREMENT': return reducer(state, action); case 'SET_MESSAGE': return reducer(state, action); default: return state; } } function MyComponent() { const [state, dispatch] = useActionState(updateState, initialState); return (

Счетчик: {state.count}

Сообщение: {state.message}

dispatch({ type: 'INCREMENT' })}>Увеличить dispatch({ type: 'DECREMENT' })}>Уменьшить dispatch({ type: 'SET_MESSAGE', payload: 'Новое сообщение' })}>Установить сообщение

); }

2. Оптимистичные обновления с useActionState

Оптимистичные обновления улучшают пользовательский опыт, немедленно обновляя UI так, как будто действие прошло успешно, а затем откатывая обновление, если действие завершилось неудачей. Это может сделать ваше приложение более отзывчивым.

import { useActionState } from 'react'; import { useState } from 'react'; async function updateServer(prevState, formData) { // Имитация асинхронного обновления на сервере. await new Promise(resolve => setTimeout(resolve, 1000)); const data = Object.fromEntries(formData); if (data.name === "error") { throw new Error('Не удалось обновить сервер.'); } return `Имя обновлено на: ${data.name}`; } function MyComponent() { const [name, setName] = useState('Начальное имя'); const [state, dispatch] = useActionState(async (prevName, newName) => { try { const result = await updateServer(prevName, { name: newName, }); return newName; // Обновление в случае успеха } catch (error) { // Откат в случае ошибки console.error("Обновление не удалось:", error); setName(prevName); return prevName; } }, name); async function handleSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const newName = formData.get('name'); setName(newName); // Оптимистично обновляем UI await dispatch(newName); } return (

Имя: Обновить

Текущее имя: {name}

Состояние: {state}

); }

3. Отложенный вызов (Debouncing) действий

В некоторых сценариях вам может понадобиться отложить вызов действий, чтобы предотвратить их слишком частое выполнение. Это может быть полезно для таких сценариев, как поля поиска, где вы хотите вызывать действие только после того, как пользователь прекратил ввод в течение определённого периода.

import { useActionState } from 'react'; import { useState, useEffect } from 'react'; async function searchItems(prevState, query) { // Имитация асинхронного поиска. await new Promise(resolve => setTimeout(resolve, 500)); return `Результаты поиска для: ${query}`; } function MyComponent() { const [query, setQuery] = useState(''); const [state, dispatch] = useActionState(searchItems, 'Начальное состояние'); useEffect(() => { const timeoutId = setTimeout(() => { if (query) { dispatch(query); } }, 300); // Задержка на 300 мс return () => clearTimeout(timeoutId); }, [query, dispatch]); return (

Поиск: setQuery(e.target.value)} />

Состояние: {state}

); }

Лучшие практики использования useActionState

• Сохраняйте чистоту действий: Убедитесь, что ваши действия являются чистыми функциями (или максимально приближены к ним). Они не должны иметь побочных эффектов, кроме обновления состояния.
• Корректно обрабатывайте ошибки: Всегда обрабатывайте ошибки в своих действиях и предоставляйте пользователю информативные сообщения об ошибках. Как отмечалось выше для серверных действий, предпочитайте возвращать строку с сообщением об ошибке из серверного действия, а не выбрасывать ошибку.
• Оптимизируйте производительность: Помните о влиянии ваших действий на производительность, особенно при работе с большими наборами данных. Рассмотрите возможность использования техник мемоизации для предотвращения ненужных перерисовок.
• Учитывайте доступность: Убедитесь, что ваше приложение остаётся доступным для всех пользователей, включая людей с ограниченными возможностями. Предоставляйте соответствующие ARIA-атрибуты и навигацию с клавиатуры.
• Тщательное тестирование: Пишите модульные и интеграционные тесты, чтобы убедиться, что ваши действия и обновления состояния работают корректно.
• Интернационализация (i18n): Для глобальных приложений внедряйте i18n для поддержки нескольких языков и культур.
• Локализация (l10n): Адаптируйте ваше приложение к конкретным регионам, предоставляя локализованный контент, форматы дат и символы валют.

useActionState в сравнении с другими решениями для управления состоянием

Хотя useActionState предоставляет удобный способ управления обновлениями состояния на основе действий, он не заменяет все решения для управления состоянием. Для сложных приложений с глобальным состоянием, которое необходимо разделять между множеством компонентов, библиотеки, такие как Redux, Zustand или Jotai, могут быть более подходящими.

Когда использовать useActionState:

• Обновления состояния простой и средней сложности.
• Обновления состояния, тесно связанные с асинхронными действиями.
• Интеграция с серверными компонентами React и серверными действиями.

Когда стоит рассмотреть другие решения:

• Сложное управление глобальным состоянием.
• Состояние, которое необходимо разделять между большим количеством компонентов.
• Продвинутые функции, такие как отладка с перемещением во времени (time-travel debugging) или промежуточное ПО (middleware).

Заключение

Хук useActionState в React предлагает мощный и элегантный способ управления обновлениями состояния, инициируемыми асинхронными действиями. Объединяя состояния загрузки и ошибок, он упрощает код и улучшает его читаемость, особенно при работе с серверными компонентами React и серверными действиями. Понимание его сильных и слабых сторон позволяет выбрать правильный подход к управлению состоянием для вашего приложения, что ведёт к более поддерживаемому и эффективному коду.

Следуя лучшим практикам, изложенным в этом руководстве, вы сможете эффективно использовать useActionState для улучшения пользовательского опыта и процесса разработки вашего приложения. Не забывайте учитывать сложность вашего приложения и выбирать решение для управления состоянием, которое наилучшим образом соответствует вашим потребностям. От простых отправок форм до сложных мутаций данных, useActionState может стать ценным инструментом в вашем арсенале разработчика на React.